<template>
  <el-dialog title="跟进" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="主题：" prop="theme">
        <el-select v-model="form.theme" placeholder="请选择主题" clearable style="width: 240px">
          <el-option
            v-for="item in themeList"
            :key="Number(item.value)"
            :label="item.label"
            :value="Number(item.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户ID：" prop="u_id">
        {{form.u_id}}
      </el-form-item>
      <el-form-item label="用户姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        {{form.phone}}
      </el-form-item>
      <el-form-item label="公司名称：" prop="company_name">
        <el-input v-model="form.company_name" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="行业：" prop="industry_name">
        <el-input v-model="form.industry_name" placeholder="请输入行业"></el-input>
      </el-form-item>
      <el-form-item label="提交时间：" prop="create_time">
        {{form.create_time}}
      </el-form-item>
      <el-form-item label="跟进结果：" prop="msg">
        <el-input type="textarea" v-model="form.msg" placeholder="请输入跟进结果"></el-input>
      </el-form-item>


    </el-form>
    <div slot="footer" class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="onSubmit('form')">提交</el-button>
    </div>

  </el-dialog>

</template>

<script>
  import { validNotaANeedPhone } from '@/utils/validate'
  import { reqEditServe, reqAdviceThemeList, reqServeById } from '@/api/customerServiceMgt/index'

  export default {
    name: 'trackServe',
    data() {
      return {
        form: {
          theme: null,
          u_id: '',//用户id
          name: '',//名称
          phone: '',//手机号码
          company_name: '',//公司名称
          industry_name: '',//行业
          create_time: '',//联系时间
          msg: ''//跟进结果
        },
        themeList: [],
        rules: {
          theme: [
            { required: true, message: '请选择主题', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请填写姓名', trigger: 'blur' }
          ],
          msg: [
            { required: true, message: '请填写跟进结果', trigger: 'blur' }
          ]

        }
      }
    },
    created() {
      this.getAdviceThemeList()//获取主题
      this.getServeById()//获取详情

    },
    mounted() {
    },
    watch: {},
    methods: {
      getServeById() {
        reqServeById(this.$attrs.id).then(res => {
          this.form.theme = res.data.theme_id//获取主题id;
          const { u_id, name, phone, company_name, industry_name, create_time, msg } = res.data
          this.form.u_id = u_id;
          this.form.name = name;
          this.form.phone = phone;
          this.form.company_name = company_name;
          this.form.industry_name = industry_name;
          this.form.create_time = create_time;
          this.form.msg = msg;
          console.log('根据id获取详情', this.form)
        })
      },
      getAdviceThemeList() {
        reqAdviceThemeList().then(res => {
          let data = res.data
          for (let key in data) {
            let obj = {
              value: key,
              label: data[key]
            }
            this.themeList.push(obj)

          }
        })
        console.log('主题', this.themeList)
      },
      onSubmit(formName) {
        //提交的代码
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.id = this.$attrs.id;
            let form = JSON.parse(JSON.stringify(this.form))
            delete form.create_time;
            delete form.u_id;
            reqEditServe(this.form).then(res => {
              this.$modal.msgSuccess('操作成功！')
              this.$emit('handleQuery')//更新列表
              this.handleCloseDialog()//关闭窗口
            })

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false)
        this.$emit('handleCloseFilter') //关闭弹窗;
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
